<template>
  <div
    class="describe"
    @click="$router.push({name:'teachReportDetail',query:{reportId:listData.reportId}})"
  >
    <div class="fs-20 text-s-o line-height20" :title="listData.title">{{ listData.title }}</div>
    <div class="classify marginT10">
      <div v-for="(item, index) in listData.categoryNameList" :key="index">
        <span v-if="index === 0">{{ item }}</span>
        <span v-else>/{{ item }}</span>
      </div>
    </div>
    <div class="name marginT10">{{ listData.nickname }}</div>
    <ul class="icon-box marginT20">
      <li v-for="(item, index) in icon" :key="index" class="text-s-o">
        <el-image
          :style="{width: item.width, position: item.position, top: item.top}"
          :src="item.url"
          :title="item.num"
        />
        <span class="num text-s-o" :title="item.num">{{ item.num }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ReportList',
  props: ['list'],
  data () {
    return {
      listData: this.list,
      icon: [{
        width: '20px',
        position: 'relative',
        top: '2px',
        url: require('@/assets/images/report_give.png'),
        num: this.list.thumbCount || 0
      }, {
        width: '18px',
        position: 'relative',
        top: '4px',
        url: require('@/assets/images/report_comment.png'),
        num: this.list.commentCount || 0
      }, {
        width: '16px',
        position: 'relative',
        top: '6px',
        url: require('@/assets/images/report_share.png'),
        num: this.list.shareCount || 0
      }, {
        width: '18px',
        position: 'relative',
        top: '4px',
        url: require('@/assets/images/report_time.png'),
        num: this.list.createTime || 0
      }]
    }
  },
  watch: {

  },
  created () {
    console.log(this.listData)
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.describe {
  padding: 20px 24px;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 24px;
  cursor: pointer;
  .classify {
    font-family: MicrosoftYaHei;
    color: rgba(0, 0, 0, 0.65);
    line-height: 14px;
    height: 14px;
    display: flex;
  }
  .name {
    font-family: MicrosoftYaHei;
    color: rgba(140, 140, 140, 1);
    line-height: 14px;
    height: 14px;
  }
  .icon-box {
    display: flex;
    justify-content: space-between;
    li {
      display: flex;
      align-items: center;
      .num {
        font-family: MicrosoftYaHei;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
        height: 22px;
        margin-left: 4px;
        flex: 1;
      }
    }
    li:not(:last-child) {
      max-width: 56px;
      min-width: 50px;
    }
    li:last-child {
      flex: 1;
    }
  }
}
</style>
